<template>
	<view class="go-vip">
		<view class="red-box">
			<view class="vip-box">
				<view class="circle"></view>
				<view class="vip-content">
					<view class="vip-title">
						<text style="font-size: 40rpx;margin-bottom: -30rpx;">VIP+超级会员卡</text>
						<text>开卡下单更优惠</text>
					</view>
					<view class="money">
						￥<text style="font-size: 70rpx">8</text>
					</view>
				</view>
			</view>
			<view class="upgrade">
				升级
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "open-vip",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.go-vip {
		padding: 12rpx 16rpx 30rpx;

		.red-box {
			position: relative;
			height: 180rpx;
			width: 100%;
			border-radius: 20rpx;
			background: linear-gradient(to right, #d31f31, #da3e50);

			.vip-box {
				position: relative;
				top: 20rpx;
				left: 20rpx;
				width: 75%;
				height: 140rpx;
				color: #d31f31;
				font-weight: bold;
				border-radius: 15rpx 70rpx 70rpx 15rpx;
				background-color: #fff;

				.circle {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(-50%, -50%);
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					background-color: #d31f31;
				}

				.vip-content {
					display: flex;

					.vip-title {
						flex: 2;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						height: 140rpx;
						padding-left: 30rpx;
					}

					.money {
						flex: 1;
						padding-top: 20rpx;
						font-size: 50rpx;
					}
				}
			}

			.upgrade {
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				color: #868600;
				font-weight: bold;
				line-height: 100rpx;
				text-align: center;
				background-color: #cfcf67;
			}
		}
	}
</style>
